<template>
  <div class="todo-add">
    新增

    <div class="todo-add-form">
      <MyInput placeholder="请输入待办事项" v-model="text" />
      <MyButton type="danger" size="large" text="提交" @click="submitTodo" />
    </div>
  </div>
</template>

<script>
import MyButton from "../components/MyButton.vue";
import MyInput from "../components/MyInput.vue";
import { mapMutations } from "vuex";

export default {
  name: "AboutView",
  components: {
    MyButton,
    MyInput,
  },
  data() {
    return {
      text: "",
    };
  },
  methods: {
    ...mapMutations(["todoStore/addTodo"]),
    submitTodo() {
      this["todoStore/addTodo"]({
        id: Date.now(),
        text: this.text,
        state: false,
      });
      this.text = "";
    },
  },
};
</script>